<!-- 脚本步骤模态框 -->
<div class="modal fade" id="scriptModal" tabindex="-1" aria-labelledby="scriptModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scriptModalLabel">脚本步骤</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="script-form">
                    <div class="mb-3">
                        <label for="script-name" class="form-label">步骤名称</label>
                        <input type="text" class="form-control" id="script-name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="script-content" class="form-label">脚本内容 (JavaScript)</label>
                        <textarea class="form-control" id="script-content" rows="15" required></textarea>
                        <div class="form-text">
                            <p>脚本中可以使用以下变量和函数：</p>
                            <ul>
                                <li><code>context</code>: 包含当前场景执行上下文的对象</li>
                                <li><code>context.variables</code>: 场景变量</li>
                                <li><code>context.previousStep</code>: 上一步执行结果</li>
                                <li><code>context.previousStep.response</code>: 上一步API响应</li>
                                <li><code>setVariable(name, value)</code>: 设置变量</li>
                                <li><code>getVariable(name)</code>: 获取变量</li>
                            </ul>
                            <p>示例：</p>
                            <pre>// 从上一步响应中提取token并设置为变量
const token = context.previousStep.response.data.token;
setVariable('token', token);

// 处理响应数据
const items = context.previousStep.response.data.items;
const processedItems = items.map(item => ({
  id: item.id,
  name: item.name.toUpperCase()
}));
setVariable('processedItems', processedItems);</pre>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-script-btn">保存</button>
            </div>
        </div>
    </div>
</div>